<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/zhide.tool.css" />
		<style type="text/css">
			.mui-card-header {
				color: #ff5000;
			}
			.mui-card-content {
				margin: 30px 20px;
			}
			.mui-card-footer:before, .mui-card-header:after {
				background-color: #ff5000;
			}
			button {
				margin-top: 10px;
				color: #FFFFFF;
				background: linear-gradient(to left, #ff9000, #ff5000);
				width: 60%;
				border-radius: 20px;
				text-align: center;
				border: 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">猜数小歌</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<!--页眉，放置标题-->
				<div class="mui-card-header">猜数小歌</div>
				<!--内容区-->
				<div class="mui-card-content">
					<div class="mui-input-group">
						<div class="mui-input-row">
							<input id="number" type="tel" class="mui-input-clear" placeholder="猜数字...">
						</div>
						<div class="mui-button-row">
							<button id="submit">确认</button>
						</div>
					</div>
					<p id="record" style="margin: 15px 20px;font-size: 20px;color: #FF5053;"></p>
					<p id="content" style="margin: 15px 20px;font-size: 20px;color: #FF5053;"></p>
					<div id="again" class="mui-button-row" style="display: none;">
						<button id="start">重新开始</button>
					</div>
				</div>
				<!--页脚，放置补充信息或支持的操作-->
				<div class="mui-card-footer">☺</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/zhide.tool.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			var more = 0; //猜数次数，最大10次
			var randomNum = 0; //开始游戏时的随机数
			var returnText = {
				low: '猜错了，低了！',
				high: '猜错了，高了！',
				yes: '猜对了！！！',
				over: '游戏结束T-T!'
			}
			var dom = {
				num:document.getElementById('number'),//输入的数值
				record: document.getElementById('record'),//历史记录
				content: document.getElementById('content'),//提示框
				again: document.getElementById('again')//重新开始按钮
			}
			mui.plusReady(function() {
				setHeaderBackground();
				randomNum = Math.floor(Math.random() * 10 + 1); //1-10
			});
			document.getElementById('start').addEventListener('tap', refresh());
			document.getElementById('submit').addEventListener('tap', function() {
				more++;
				if(more == 5) {
					if(num == randomNum) {
						content.innerHTML = returnText.yes;
						again.style.display = 'block'
					} else {
						content.innerHTML = returnText.over;
						return
					}
				}
				var num = dom.num.value;
				if(num < 0 || num > 10) {
					dom.num.value = '';
					mui.toast('输入数值超过范围');
					return
				}
				dom.num.value = '';
				var str1 = record.innerHTML
				if(num == randomNum) {
					content.innerHTML = str[2];
					again.style.display = 'block'
				} else if(num < randomNum) {
					content.innerHTML = str[0];
					record.innerHTML = str1 + '&nbsp;&nbsp;' + num;
				} else {
					content.innerHTML = str[1];
					record.innerHTML = str1 + '&nbsp;&nbsp;' + num;
				}
			});

			function refresh() { //重置刷新
				randomNum = Math.floor(Math.random() * 10 + 1); //1-10
				dom.again.style.display = 'none'
				dom.content.innerHTML = '';
				dom.record.innerHTML = ''
			}
		</script>
	</body>

</html>